<template>
  <div class="dashboard-container">
    <el-card>
      <h3>知识产权报表预览</h3>
      <div class="Container">
        <div id="echartsBarContainer" class="echartsContainer"></div>
        <div id="echartsLineContainer" class="echartsContainer"></div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import * as echarts from "echarts";

export default {
  name: "Dashboard",
  computed: {
    ...mapGetters(["name"]),
  },
  data() {
    return {
      series: [
        {
        id: '#echartsBarContainer',
        type:'bar'
        },
        {
        id: '#echartsLineContainer',
        type:'line'
        },
        ],
      option: {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        "axisLabel":{
          interval: 0
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: "line",
          },
        ],
      },
    };
  },
  methods: {
    setEcharts(id,type) {
      // 基于准备好的dom，初始化echarts实例
      const container = document.querySelector(id);
      console.dir("container:", container);
      var myChart = echarts.init(container);
      // 绘制图表
      myChart.setOption({
        tooltip: {},
        xAxis: {
          data: ["科技类", "金融类", "创新类", "电子类", "实体类", "房地厂类"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type,
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      });
    },
  },
  mounted() {
    this.series.forEach(item => {
      this.setEcharts(item.id,item.type)
    })
   }
};
</script>

<style lang="scss" scoped>
.Container {
  width: 100%;
  height: 100%;
  display: flex;
}
.echartsContainer {
  width: 40vw;
  height: 50vh;
}
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
